// 学生信息管理页   
// 登录校验  用户名渲染       退出逻辑

// 如果页面 没有 token，提示用户并跳转登录页面
checkToken()

// 用户名渲染函数
decUser()

// 退出逻辑函数
quit()


// 学生信息渲染
// 抽取函数
async function stuInfo(){
  // 获取数据
  const stuData = await axios.get('/students')
  // console.log(stuData)
  // 渲染学生信息
  const info =  stuData.data.map(ele=>{
    // 解构数据
  const {age,area,city,gender,group,hope_salary,id,name,province,salary} = ele
    return `<tr>
              <td>${name}</td>
              <td>${age}</td>
              <td>${gender === 0 ? '男' : '女' }</td>
              <td>第${group}组</td>
              <td>${hope_salary}</td>
              <td>${salary}</td>
              <td>${province+city+area}</td>
              <td data-id='${id}'>
                <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen"></i></a>
                <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
              </td>
            </tr>
          `
  })
  document.querySelector('.list').innerHTML = info.join('')
  // 渲染学员位数
  document.querySelector('.total').innerHTML = stuData.data.length
}
stuInfo()


// 创建模态框示例
const Modal = document.querySelector('#modal')
const modal = new bootstrap.Modal(Modal)
// 点击添加按钮 显示模态框
document.querySelector('#openModal').addEventListener('click',()=>{
  // 修改标题
  document.querySelector('.modal-title').innerHTML = '添加学员'
  // 重置表单
  document.querySelector('#form').reset()
  // 重置籍贯的 城市 及 地区数据
  stuCity.innerHTML = `<option value="">--城市--</option>`
  stuArea.innerHTML = `<option value="">--地区--</option>`
  // 删除自定义属性
  Modal.dataset.id = ''
  // 显示模态框
  modal.show()
})

// 省市区联动
const stuPro = document.querySelector('[name="province"]')
const stuCity = document.querySelector('[name="city"]')
const stuArea = document.querySelector('[name="area"]')
// console.log(stuPro) 


// 获取省市区数据
async function getPro(){
  const pro = await axios.get('/api/province')
  // console.log(pro)
  const proInfo = pro.list.map(ele=>{
    return `<option value="${ele}">${ele}</option>`
  }).join('')
  // 渲染省份数据
  stuPro.innerHTML = `<option value="">--省份--</option>${proInfo}`



  // 选择省份改变 渲染对应的城市数据
  // 点击省份下拉框  触发change 事件 ， 获取点击省份的城市 数据（select 标签的 value属性  获取到的是 选中的 option 标签的value 值）
  stuPro.addEventListener('change',async ()=>{
    // 获取城市数据
    const city = await axios.get('/api/city',{
      params:{pname:stuPro.value}
    })
    // console.log(city)
    const cityInfo =  city.list.map(ele=>{
      return `<option value="${ele}">${ele}</option>`
    }).join('')
    // 渲染城市数据
    stuCity.innerHTML = `<option value="">--城市--</option>${cityInfo}`

    // 选择省份改变  重置地区
    stuArea.innerHTML = `<option value="">--地区--</option>`
  })


  // 选择城市改变  渲染对应的区域数据
  stuCity.addEventListener('change',async ()=>{
    // 获取城市数据
    const area = await axios.get('/api/area',{
      params:{
        pname:stuPro.value,
        cname:stuCity.value
      }
    })
    // console.log(area)
    const areaInfo =  area.list.map(ele=>{
      return `<option value="${ele}">${ele}</option>`
    }).join('')
    // 渲染区域数据
    stuArea.innerHTML = `<option value="">--地区--</option>${areaInfo}`
  })

}
getPro()



// 点击模态框确认 添加学员  保存修改
document.querySelector('#submit').addEventListener('click',(e)=>{
  if(Modal.dataset.id){
    // 模态框有自定义属性id  调用保存编辑函数
    render()
  }else{
    // 调用添加学员函数
    funData()
  }
})
// 封装添加学员函数 用于数据收集 转换   提交
async function funData(){
  const form = document.querySelector('#form')
  const data = serialize(form,{hash:true,empty:true})
  // console.log(data)
  data.age = +data.age
  data.gender = +data.gender
  data.group = +data.group
  data.salary = +data.salary
  data.hope_salary = +data.hope_salary
  // console.log(data)

 try{
   const res = await axios.post('/students',data)
   // console.log(res)
   // 向服务器添加学生信息成功后 提示信息
   showToast(res.message)

   //重新渲染学生信息
   stuInfo()

  }catch(error){
    // 添加错误 提示信息
    // console.dir(error)
    showToast(error.response.data.message)
  }
  modal.hide()
}


// 点击删除/编辑   删除/编辑学员  再次渲染
document.querySelector('.list').addEventListener('click',(e)=>{
  if(e.target.classList.contains('bi-trash')){
    // console.log('点击删除')
    const id  = e.target.parentNode.parentNode.dataset.id
    // 调用删除学员函数
    delStu(id)
  }
  if(e.target.classList.contains('bi-pen')){
    // console.log('点击编辑')
    const id = e.target.parentNode.parentNode.dataset.id
    // 调用回显编辑学员函数
    revise(id)
  }
})
// 删除学员函数
async  function delStu(id){
  await axios.delete(`/students/${id}`)
  // 重新渲染
  stuInfo()
}
// 回显编辑学员函数
async  function  revise(id){
  // 获取修改学员详情
  const getStu = await axios.get(`/students/${id}`)
  // console.log(getStu)
  // 数据回显到模态框
  const getArr =  ['name','age','hope_salary','salary','group']
  getArr.forEach(ele=>{
    document.querySelector(`[name=${ele}]`).value = getStu.data[ele]
  })
  // 性别回显
  const {gender,province,city,area} = getStu.data
  const sexs = document.querySelectorAll('.input [name="gender"]')
  // console.log(sexs)
  sexs[gender].checked = true
  // 省份城市地区回显
  // 回显省份
  stuPro.value = province

  // 获取对应省份的城市
  const cityData =  await axios.get('/api/city',{
    params:{pname:province}
  })
  // console.log(cityData)
  const decCityData = cityData.list.map(ele=>{
    return `<option value="${ele}">${ele}</option>`
  }).join('')
  stuCity.innerHTML =  `<option value="">--城市--</option>${decCityData}`
  // 回显城市
  stuCity.value = city

  // 获取对应城市的地区
  const areaData = await axios.get('/api/area',{
    params:{
      pname:province,
      cname:city
    }
  })
  // console.log(areaData)
  const decAreaDta = areaData.list.map(ele=>{
    return `<option value="${ele}">${ele}</option>`
  }).join('')
  stuArea.innerHTML = `<option value="">--地区--</option>${decAreaDta}`
  //  回显地区
  stuArea.value = area


  // 修改标题
  document.querySelector('.modal-title').innerHTML = '修改学员'
  // 显示模态框
  modal.show()
  // 为模态框添加自定义属性   用于区分编辑和添加
  Modal.dataset.id = id
}
// 创建保存修改函数
async function render(){
  // console.log('修改了')
  // 获取表单数据
  const form = document.querySelector('#form')
  const data = serialize(form,{hash:true,empty:true})
  // console.log(data)
  data.age = +data.age
  data.group = +data.group
  data.hope_salary = +data.hope_salary
  data.salary = +data.salary
  data.gender = +data.gender

  // 将修改的数据提交到服务器
  try{
    // 提交成功服务器返回的信息
    const succData = await axios.put(`/students/${Modal.dataset.id}`,data)
    // console.log(succData)
    if(data.age>=18){
      // 轻提示
      showToast(succData.message)
      // 重新渲染
      stuInfo()
    }else{
      showToast('年龄不能小于18')
    }
  }catch(error){
    // 失败返回的信息
    // console.dir(error)
    showToast(error.response.data.message)
  }
  // 关闭模态框
  modal.hide()
}